 <template>
   <!--表格 begin-->
   <div style="padding: 10px 15px;" class="overflowY" @click="hiedPanel">
    <!--
    单行显示可以使用show-overflow-tooltip属性，
    它接受一个Boolean，为true时多余的内容会在 hover
    时以 tooltip 的形式显示出来。

    添加一个el-table-column，设type属性为selection实现多选
    -->
     <div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;position: relative;">
       <el-table
         ref="singleTable"
         :data="tableData"
         tooltip-effect="dark"
         :summary-method="getSummaries"
         show-summary
         @row-contextmenu="rowContextmenu"
         @cell-dblclick="cellClick"
         @row-click="rowClick"
         highlight-current-row
         height="400"
         style="width: 100%"
         @selection-change="handleSelectionChange">
         <el-table-column
           type="selection"
           width="45">
         </el-table-column>
         <el-table-column
           width="50"
           align="center"
           type="index"
           label="序号">
         </el-table-column>
         <el-table-column
           align="center"
           prop="number"
           label="项目编号"
           show-overflow-tooltip
           width="120">
         </el-table-column>
         <el-table-column
           align="center"
           label="项目名称"
           show-overflow-tooltip
           width="200">
           <template slot-scope="scope">
             <div style="width: 100%;text-align: center;" v-if="scope.row.edit">
               <el-input v-model="scope.row.name" placeholder="请输入内容" size="mini"></el-input>
             </div>
             <div style="width: 100%;text-align: center;" v-else>
               <span>{{scope.row.name}}</span>
             </div>
           </template>
         </el-table-column>
         <el-table-column
           align="center"
           label="项目类型"
           show-overflow-tooltip
           width="200">
           <template slot-scope="scope">
             <div style="width: 100%;text-align: center;" v-if="scope.row.edit">
               <el-input v-model="scope.row.object" placeholder="请输入内容" size="mini"></el-input>
             </div>
             <div style="width: 100%;text-align: center;" v-else>
               <span>{{scope.row.object}}</span>
             </div>
           </template>
         </el-table-column>
         <el-table-column
           align="center"
           prop="state"
           label="项目状态"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           align="center"
           prop="initiator"
           label="立项人"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           align="center"
           width="100"
           prop="trackingPeople"
           label="项目跟踪人"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           align="center"
           prop="company"
           label="建设单位"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           align="center"
           prop="beginTime"
           label="开始时间"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           prop="endTime"
           align="center"
           label="结束时间"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           align="center"
           prop="engineerinCost"
           label="工程造价"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           align="center"
           width="300"
           label="操作">
           <template slot-scope="scope">
             <div style="text-align: center;">
               <el-row>
                 <el-col :span="8">
                   <el-button v-if="scope.row.edit" type="primary" size="mini" @click="keepTable(scope.row)">保存修改</el-button>
                   <el-button v-else type="primary" size="mini" @click="scope.row.edit=!scope.row.edit">自身编辑</el-button>
                 </el-col>
                 <el-col :span="8"><el-button type="primary" size="mini" @click="popUpEdit(scope.row)">弹框编辑</el-button></el-col>
                 <el-col :span="8"><el-button type="danger" size="mini">删除</el-button></el-col>
               </el-row>
             </div>
           </template>
         </el-table-column>
       </el-table>
       <div class="positionMenu" id="menuBox" v-if="menuIsShow">
         <span>删除</span>
         <span>编辑</span>
       </div>
       <div style="position: absolute;bottom:0;left: 10px;">
         <paging :size-change="handleSizeChange"
                 :current-change="handleCurrentChange"
                 :page-sizes="pageSizes"
                 :page-num="pageNum"
                 :total-num="totalNum">
         </paging>
       </div>
       <!--编辑弹出层 begin-->
       <el-dialog title="表格编辑" :visible.sync="dialogTableEdit" top="60px">
         <div class="overflowY" style="height: 330px;padding-right: 15px;">
           <el-form :inline="true" :model="ruleForm" label-position="right" class="demo-form-inline conponentForm" label-width="90px" size="small">
             <el-row>
             <el-col :span="24">
               <el-form-item label="项目名称 : " prop="itmeName">
                 <el-input size="small" v-model="ruleForm.name" placeholder="请输入项目名称"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="24">
               <el-form-item label="开始时间 : " prop="itmeName">
                 <el-date-picker
                   v-model="ruleForm.beginTime"
                   type="date"
                   placeholder="选择日期">
                 </el-date-picker>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="24">
               <el-form-item label="结束时间 : " prop="itmeName">
                 <el-date-picker
                   v-model="ruleForm.endTime"
                   type="date"
                   placeholder="选择日期">
                 </el-date-picker>
               </el-form-item>
             </el-col>
           </el-row>
           </el-form>
         </div>
         <div slot="footer" class="dialog-footer" style="text-align: right;">
           <el-button @click="dialogTableEdit = false">取 消</el-button>
           <el-button type="primary" @click="btnClickFun">保 存</el-button>
         </div>
       </el-dialog>
     </div>
     <base-card title="说明">
       <code style="margin-top: 15px;">
         <span style="width: 100%;display: inline-block;">1、return里面放table的数据（:data=”tableData”）,el-table-column里面的prop属性即为表格里面要添加的数据、label为表头的内容</span>
         <span style="width: 100%;display: inline-block;">2、summary-method、show-summary属性为合计功能，不需要删除即可</span>
         <span style="width: 100%;display: inline-block;">3、el-table-column type属性为selection 是复选框，不需要删除即可</span>
         <span style="width: 100%;display: inline-block;">4、el-table上的 height="400" 属性控制表格的高度（超出高度出现滚动条）</span>
         <span style="width: 100%;display: inline-block;">5、如不需要边框去掉最外层div style里面的border: 1px solid #ccc;即可</span>
         <span style="width: 100%;display: inline-block;">6、el-table-column 上的width属性控制表格列的宽度，不设置width列表自动平分</span>
         <span style="width: 100%;display: inline-block;">7、el-table-column 上的label为每一列的表头</span>
         <span style="width: 100%;display: inline-block;">8、el-table-column 上的prop为每一列的数据，如果需要自定义内容（按钮）就把prop删掉</span>
         <span style="width: 100%;display: inline-block;">9、内容居中 在el-table-column上设置align="center"</span>
         <span style="width: 100%;display: inline-block;">10、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
         <span style="width: 100%;display: inline-block;">
           11、事件说明：
           <p>@row-contextmenu="rowContextmenu"  --  鼠标右键点击会触发该事件</p>
           <p>@cell-dblclick="cellClick"  --  单元格被双击击时会触发该事件</p>
           <p>@row-click="rowClick"  --  行被点击时会触发该事件</p>
         </span>
         <span style="width: 100%;display: inline-block;">12、删除时或者执行某些事件的时候，需要获取当前行的数据信息，在方法中传入此行的信息即可（例如：在自定义模板中有删除按钮，在调用删除的方法的时候，传入 scope.row 即可）</span>
         <span style="width: 100%;display: inline-block;">
           13、表格编辑：
           <div style="margin-left: 20px;">
              <div>
                A、页面加载完毕在table数据中添加 edit -- true/false 属性用来控制编辑框的显示隐藏（如果是接口调用数据，在返回数据后执行此操作）
               <p style="margin-left: 20px;">this.tableData.map(v => {this.$set(v, 'edit', false)})</p>
              </div>
              <div>
                B、row-contextmenu  事件里面改变edit的值来显示编辑框（edit = true）
              </div>
              <div>
                C、keepTable  事件里面改变edit的值来隐藏编辑框 （edit = false 还可以在方法里执行自定义保存方法）
              </div>
              <div>
                D、在需要编辑的项上添加自定义模板，删除 el-table-column 上的 prop绑定值属性（输入框input的绑定值需要改成修改项的值，展示span的值也要修改成修改项的值）
                <div v-html="addHtml">{{addHtml}}</div>
              </div>
           </div>
         </span>
         <span style="width: 100%;display: inline-block;">13、this.menuIsShow = false / true 控制右键按钮的显示隐藏</span>
         <span style="width: 100%;display: inline-block;">14、弹出层编辑传值问题 -- 点击编辑按钮按照示例把当前行数据赋值给弹出层里面的form表单即可（注意字段名的对应）</span>
         <span style="width: 100%;display: inline-block;">
           15、表格最后的按钮，如果要根据条件进行显示隐藏某一个按钮，在按钮上添加 v-if 判断即可
           <p style="margin-left: 25px;">例：(定义变量show    show = true 显示删除按钮)<br><pre><code>&lt;el-button type="danger" size="mini" v-if="show"&gt;删除&lt;/el-button&gt;</code></pre></p>
         </span>
       </code>
     </base-card>
     <base-card title="HTML">
       <div v-html="tableSizeHtml">{{tableSizeHtml}}</div>
      </base-card>
     <base-card title="JS">
       <pre><code>import paging from '@/components/demoAssembly/paging'<br>import BaseCard from '@/components/BaseCard/BaseCard'<br>export default {<br>  data() {<br>    return {<br>      ruleForm: {},<br>      rowIndex: 0,<br>      dialogTableEdit: false,<br>      pageSizes: [10, 20, 30, 40],<br>      pageNum: 10,<br>      totalNum: 50,<br>      handleSizeChange() {<br>        alert('pageSize 改变时触发')<br>      },<br>      handleCurrentChange() {<br>        alert('currentPage 改变时会触发')<br>      },<br>      tableData: [<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        },<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        },<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        },<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        },<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        },<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        },<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        },<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        },<br>        {<br>          number: '12345678',<br>          date: '2016-05-03',<br>          name: '项目名称1',<br>          object: '项目类型1',<br>          state: '开始',<br>          initiator: '张三',<br>          trackingPeople: '李四',<br>          company: 'xxx单位',<br>          beginTime: '2016/01/02',<br>          endTime: '2016/02/03',<br>          engineerinCost: '250000'<br>        }<br>      ]<br>    }<br>  },<br>  components: {<br>    paging,<br>    BaseCard<br>  },<br>  mounted() {<br>    this.tableData.map(v =&gt; {<br>      this.$set(v, 'edit', false)<br>    })<br>      },<br>  methods: {<br>    handleSelectionChange(val) { // 当选择项发生变化时会触发该事件,val返回选中行<br>          },<br>    getSummaries(param) {<br>      const { columns, data } = param<br>      const sums = []<br>      columns.forEach((column, index) =&gt; {<br>        if (index === 1) {<br>          sums[index] = '合计'<br>          return<br>        }<br>        const values = data.map(item =&gt; Number(item[column.property]))<br>        if (column.property === 'engineerinCost') {<br>          sums[index] = values.reduce((prev, curr) =&gt; {<br>            const value = Number(curr)<br>            if (!isNaN(value)) {<br>              return prev + curr<br>            } else {<br>              return prev<br>            }<br>          }, 0)<br>          // sums[index] += ' 元'<br>        } else {<br>          sums[index] = ''<br>        }<br>      })<br><br>      return sums<br>    },<br>    keepTable(row) { // 点击编辑保存按钮执行的function<br>      row.edit = false<br>    },<br>    popUpEdit(row) { // 点击弹框编辑按钮执行的function<br>      this.dialogTableEdit = true<br>      this.ruleForm = row<br>    },<br>    btnClickFun() { // 点击弹出层修改确认按钮执行的function<br>      // 在此方法里面执行调用保存接口完成修改数据保存 然后刷新数据<br>      this.dialogTableEdit = false<br>    }<br>  }<br>}</code></pre>
     </base-card>
   </div>
   <!--表格 end-->
</template>

<script>
import paging from '@/components/demoAssembly/paging' // 分页
import BaseCard from '@/components/BaseCard/BaseCard'

export default {
  data() {
    return {
      addHtml: '<pre><code>&lt;template slot-scope="scope"&gt;<br>   &lt;div style="width: 100%;text-align: center;" v-if="scope.row.edit"&gt;<br>       &lt;el-input v-model="scope.row.name" placeholder="请输入内容" size="mini"&gt;&lt;/el-input&gt;<br>   &lt;/div&gt;<br>   &lt;div style="width: 100%;text-align: center;" v-else&gt;<br>       &lt;span&gt;{{scope.row.name}}&lt;/span&gt;<br>   &lt;/div&gt;<br>&lt;/template&gt;</code></pre>',
      menuIsShow: false,
      tableSizeHtml: '<pre><code>    &lt;div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;"&gt;<br>       &lt;el-table<br>         :data="tableData"<br>         tooltip-effect="dark"<br>         :summary-method="getSummaries"<br>         show-summary<br>         height="400"<br>         style="width: 100%"<br>         @selection-change="handleSelectionChange"&gt;<br>         &lt;el-table-column<br>           type="selection"<br>           width="45"&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           width="50"<br>           align="center"<br>           type="index"<br>           label="序号"&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           prop="number"<br>           label="项目编号"<br>           show-overflow-tooltip<br>           width="120"&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           label="项目名称"<br>           show-overflow-tooltip<br>           width="200"&gt;<br>           &lt;template slot-scope="scope"&gt;<br>             &lt;div style="width: 100%;text-align: center;" v-if="scope.row.edit"&gt;<br>               &lt;el-input v-model="scope.row.name" placeholder="请输入内容" size="mini"&gt;&lt;/el-input&gt;<br>             &lt;/div&gt;<br>             &lt;div style="width: 100%;text-align: center;" v-else&gt;<br>               &lt;span&gt;{{scope.row.name}}&lt;/span&gt;<br>             &lt;/div&gt;<br>           &lt;/template&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           prop="object"<br>           label="项目类型"<br>           show-overflow-tooltip&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           prop="state"<br>           label="项目状态"<br>           show-overflow-tooltip&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           prop="initiator"<br>           label="立项人"<br>           show-overflow-tooltip&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           width="100"<br>           prop="trackingPeople"<br>           label="项目跟踪人"<br>           show-overflow-tooltip&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           prop="company"<br>           label="建设单位"<br>           show-overflow-tooltip&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           prop="beginTime"<br>           label="开始时间"<br>           show-overflow-tooltip&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           prop="endTime"<br>           align="center"<br>           label="结束时间"<br>           show-overflow-tooltip&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           prop="engineerinCost"<br>           label="工程造价"<br>           show-overflow-tooltip&gt;<br>         &lt;/el-table-column&gt;<br>         &lt;el-table-column<br>           align="center"<br>           width="300"<br>           label="操作"&gt;<br>           &lt;template slot-scope="scope"&gt;<br>             &lt;div style="text-align: center;"&gt;<br>               &lt;el-row&gt;<br>                 &lt;el-col :span="8"&gt;<br>                   &lt;el-button v-if="scope.row.edit" type="primary" size="mini" @click="keepTable(scope.row)"&gt;保存修改&lt;/el-button&gt;<br>                   &lt;el-button v-else type="primary" size="mini" @click="scope.row.edit=!scope.row.edit"&gt;自身编辑&lt;/el-button&gt;<br>                 &lt;/el-col&gt;<br>                 &lt;el-col :span="8"&gt;&lt;el-button type="primary" size="mini" @click="popUpEdit(scope.row)"&gt;弹框编辑&lt;/el-button&gt;&lt;/el-col&gt;<br>                 &lt;el-col :span="8"&gt;&lt;el-button type="danger" size="mini"&gt;删除&lt;/el-button&gt;&lt;/el-col&gt;<br>               &lt;/el-row&gt;<br>             &lt;/div&gt;<br>           &lt;/template&gt;<br>         &lt;/el-table-column&gt;<br>       &lt;/el-table&gt;<br>       &lt;div style="position: absolute;bottom:0;left: 10px;"&gt;<br>         &lt;paging :size-change="handleSizeChange"<br>                 :current-change="handleCurrentChange"<br>                 :page-sizes="pageSizes"<br>                 :page-num="pageNum"<br>                 :total-num="totalNum"&gt;<br>         &lt;/paging&gt;<br>       &lt;/div&gt;<br>       &lt;!--编辑弹出层 begin--&gt;<br>       &lt;el-dialog title="表格编辑" :visible.sync="dialogTableEdit" top="60px"&gt;<br>         &lt;div class="overflowY" style="height: 330px;padding-right: 15px;"&gt;<br>           &lt;el-form :inline="true" :model="ruleForm" label-position="right" class="demo-form-inline conponentForm" label-width="90px" size="small"&gt;<br>             &lt;el-row&gt;<br>             &lt;el-col :span="24"&gt;<br>               &lt;el-form-item label="项目名称 : " prop="itmeName"&gt;<br>                 &lt;el-input size="small" v-model="ruleForm.name" placeholder="请输入项目名称"&gt;&lt;/el-input&gt;<br>               &lt;/el-form-item&gt;<br>             &lt;/el-col&gt;<br>           &lt;/el-row&gt;<br>           &lt;el-row&gt;<br>             &lt;el-col :span="24"&gt;<br>               &lt;el-form-item label="开始时间 : " prop="itmeName"&gt;<br>                 &lt;el-date-picker<br>                   v-model="ruleForm.beginTime"<br>                   type="date"<br>                   placeholder="选择日期"&gt;<br>                 &lt;/el-date-picker&gt;<br>               &lt;/el-form-item&gt;<br>             &lt;/el-col&gt;<br>           &lt;/el-row&gt;<br>           &lt;el-row&gt;<br>             &lt;el-col :span="24"&gt;<br>               &lt;el-form-item label="结束时间 : " prop="itmeName"&gt;<br>                 &lt;el-date-picker<br>                   v-model="ruleForm.endTime"<br>                   type="date"<br>                   placeholder="选择日期"&gt;<br>                 &lt;/el-date-picker&gt;<br>               &lt;/el-form-item&gt;<br>             &lt;/el-col&gt;<br>           &lt;/el-row&gt;<br>           &lt;/el-form&gt;<br>         &lt;/div&gt;<br>         &lt;div slot="footer" class="dialog-footer" style="text-align: right;"&gt;<br>           &lt;el-button @click="dialogTableEdit = false"&gt;取 消&lt;/el-button&gt;<br>           &lt;el-button type="primary" @click="btnClickFun"&gt;确 定&lt;/el-button&gt;<br>         &lt;/div&gt;<br>       &lt;/el-dialog&gt;<br>     &lt;/div&gt;</code></pre>',
      ruleForm: {},
      rowIndex: 0,
      dialogTableEdit: false,
      pageSizes: [10, 20, 30, 40],
      pageNum: 10,
      totalNum: 50,
      handleSizeChange() {
        alert('pageSize 改变时触发')
      },
      handleCurrentChange() {
        alert('currentPage 改变时会触发')
      },
      tableData: [
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称123',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        }
      ]
    }
  },
  components: {
    paging,
    BaseCard
  },
  mounted() {
    this.tableData.map(v => {
      this.$set(v, 'edit', false)
    })
  },
  methods: {
    rowClick() {
      this.$refs.singleTable.setCurrentRow()
    },
    hiedPanel(event) {
      const btnDom = document.getElementById('menuBox')
      if (btnDom) {
        if (!btnDom.contains(event.target)) {
          this.menuIsShow = false
          this.$refs.singleTable.setCurrentRow()
        }
      }
    },
    cellClick(row, column, cell, event) {
      row.edit = true
    },
    rowContextmenu(row, column, e) {
      window.event.returnValue = false
      this.menuIsShow = true
      setTimeout(() => {
        const menuDom = document.getElementById('menuBox')
        menuDom.style.top = column.clientY - 90 + 'px'
        menuDom.style.left = column.clientX - 220 + 'px'
        menuDom.style.opacity = 1
        this.$refs.singleTable.setCurrentRow(row)
      }, 50)
    },
    handleSelectionChange(val) { // 当选择项发生变化时会触发该事件,val返回选中行

    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === 'engineerinCost') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          // sums[index] += ' 元'
        } else {
          sums[index] = ''
        }
      })

      return sums
    },
    keepTable(row) { // 点击编辑保存按钮执行的function
      row.edit = false
    },
    popUpEdit(row) { // 点击弹框编辑按钮执行的function
      this.dialogTableEdit = true
      this.ruleForm = row
    },
    btnClickFun() { // 点击弹出层修改确认按钮执行的function
      // 在此方法里面执行调用保存接口完成修改数据保存 然后刷新数据
      this.dialogTableEdit = false
    }
  }
}
</script>
<style scoped>
  .conponentForm >>> .el-form-item__content{
    width: calc(100% - 90px);
  }
  .conponentForm >>> .el-form-item{
    width: 100%;
  }
  .positionMenu{
    font-size: 0;
    width: 100px;
    background: #FFFFFF;
    position: absolute;
    top:0;
    left: 0;
    opacity: 0;
    box-shadow: 0px 1px 5px 0px #cccccc;
    border-radius: 4px;
  }
  .positionMenu span{
    width: 100%;
    display: inline-block;
    font-size: 12px;
    color: #333333;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid #cccccc;
  }
  .positionMenu span:hover{
    background: rgba(0,0,0,.06);
  }
  .positionMenu span:last-child{
    border-bottom: 0;
  }
</style>

